<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门</title>
	</head>
	<body>
		<div id="app">
			<!-- 2.定义路由请求地址 
				1.router-link 在解析之后形参a标签
				2.to在解析之后,形成href属性.实现页面转跳
			-->
			<a href="http://www.baidu.com">百度</a>
			<router-link to="/home">家</router-link>
			<router-link to="/dog">狗</router-link>
			<router-link to="/zoo">动物园</router-link>
			<!-- 3.一般需要在当前页面中展现新组件的内容(html)提前设定展现位,之后被渲染为一个div 占位符-->
			<router-view></router-view>
		</div>

		<!-- 1.定义home 模板 -->
		<template id="homeTem">
			<div>
				<h1>这里是家</h1>
			</div>
		</template>

		<template id="dogTem">
			<div>
				<h1>这是一只狗</h1>
			</div>
		</template>
		<template id="zooTem">
			<div>
				<h1>这是动物园</h1>
				<router-link to="/zoo/lion">狮子</router-link>
				<router-link to="/zoo/tiger">老虎</router-link>
				<router-view></router-view>
			</div>
		</template>
		<template id="lionTem">
			<div>
				<h1>我是小狮子</h1>
			</div>
		</template>
		<template id="tigerTem">
			<div>
				<h1>我是小老虎</h1>
			</div>
		</template>

		<!-- 1.导入JS注意顺序 先导入VUE.js 之后导入路由 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>.
		<script>
			//定义组件变量
			let homeCom = {
				template: "#homeTem"
			}

			let dogCom = {
				template: "#dogTem"
			}

			let zooCom = {
				template: "#zooTem"
			}

			let lionCom = {
				template: "#lionTem"
			}

			let tigerCom = {
				template: "#tigerTem"
			}

			/* 3.实现请求与路由的绑定 定义路由对象 
				routes: 是一个数组结构,数组中包含对象的结构
				path: 拦截请求的路径名称
				component: 组件名称
				children: 定义父子级关系的属性.在指定的位置渲染子组件
			*/
			const router = new VueRouter({
				routes: [{
						path: "/",
						redirect: "/home"
					},
					{
						path: "/home",
						component: homeCom
					},
					{
						path: "/dog",
						component: dogCom
					},
					{
						path: "/zoo",
						component: zooCom,
						children: [{
								path: "/zoo/tiger",
								component: tigerCom
							},
							{
								path: "/zoo/lion",
								component: lionCom
							}
						]
					}
				]
			})

			//4.将路由对象与VUE实例进行绑定
			const app = new Vue({
				el: "#app",
				router
			})
		</script>
	</body>
</html>
